<template>
    <view :style="{ '--theme-color': themeColor }">
        <!-- 备注输入框部分 -->
        <view class="re-input flex-center-y" :class="{ 're-input-show': pageData.reShow }">
            <input type="text" v-model="pageData.reText" :placeholder="placeTesxt" :maxlength="reMaxLength"
                @input="inputChange" />
            <view class="re-confirm flex-center" @tap="pageData.reShow = false">关闭</view>
        </view>
        <!--头部备注 和 展开收起部分  -->
        <view class="re-header" v-if="isRemark || !fixedAmount">
            <slot name="remark">
                <view class="r-left" hover-class="hover-but-style" hover-start-time="10" hover-stay-time="60"
                    v-if="isRemark" @tap="pageData.reShow = !pageData.reShow">添加备注</view>
            </slot>
            <view class="r-right flex-center-y" hover-class="hover-but-style" hover-start-time="10" hover-stay-time="60"
                @tap="pageData.show = !pageData.show" v-if="!fixedAmount">
                {{ pageData.show ? '收起' : '展开' }}
                <image src="../static/iconImg/arrow.svg" :class="{ 'isRotate': pageData.show }" />
            </view>
        </view>
        <!-- 支付按钮 -->
        <view class="fixed-amoount flex-center" :style="{ maxHeight: !pageData.show ? '1000rpx' : '0' }">
            <view class="pay flex-center" hover-class="hover-but-style" hover-start-time="10" hover-stay-time="60"
                @tap="pay">
                确认支付</view>
        </view>
        <!-- 键盘主体部分 -->
        <view class="borard-mian" :class="{ 'borard-mian-show': pageData.show }" v-if="!fixedAmount">
            <view class="b-left">
                <block v-for="(v, i) in numberArray" :key="v">
                    <view class="number-item flex-center" hover-class="hover-but-style" hover-start-time="10"
                        hover-stay-time="60" @tap="changeKey(v)">{{ v }}</view>
                </block>
            </view>
            <view class="b-right">
                <view class="del-number flex-center" hover-class="hover-but-style" hover-start-time="10"
                    hover-stay-time="60" @tap="changeKey('del')">
                    <image src="../static/iconImg/del-icon.svg" />
                </view>
                <view class="pay-amount flex-center" hover-class="hover-but-style" hover-start-time="10"
                    hover-stay-time="60" @tap="pay">支付
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive } from "vue"
const props = defineProps({
    value: { type: [String, Number] }, //金额双向绑定的值 
    maxLength: { type: [String, Number], default: '11' }, //最大输入长度限制
    payStyle: { type: Object, default: () => ({}) }, //支付按钮样式
    themeColor: { type: String, default: '#35d757' }, //主题色
    fixedAmount: { type: Boolean, default: false, }, //是否为固定金额
    remark: { type: String, }, //备注双向绑定值
    reMaxLength: { type: Number, default: 22 }, //备注最大输入长度限制
    placeTesxt: { type: String, default: '请输入备注' }, //输入提示语
    isRemark: { type: Boolean, default: true }, //是否需要备注
})
const emits = defineEmits(['update:value', 'change', 'payment', 'update:remark'])
const numberArray = ['1', '2', '3', '4', '6', '7', '8', '9', '.', '0', 'C']
const pageData = reactive({
    show: false,//键盘显示隐藏
    reShow: false,//备注显示隐藏
    reText: props.remark
})
const changeKey = (val) => {
    // 判断初始值
    if (props.value == undefined && !['del', 'C', '.'].includes(val)) return emitsUpdate(val)
    // 清空
    if (val == 'C') return emitsUpdate('0.00')
    // 小于0 并且点击 不为 . 不为 del  并且不是0.
    if (props.value <= 0 && val != '.' && val != 'del' && props.value == '0.00') return emitsUpdate(val)
    // 小于0 并且点击 为 .
    if (props.value <= 0 && val == '.') return emitsUpdate('0.')
    // 小于0 并且点击 不包含小数点
    if (props.value <= 0 && !props.value.includes('.') && val != 'del') return emitsUpdate(val)
    //  长度小于等于1  并且点击 Del
    if (props.value.length <= 1 && val == 'del') return emitsUpdate('0.00')
    // 点击 删除
    if (val == 'del') return emitsUpdate(props.value.substring(0, props.value.length - 1))
    // 包含 . 并且点击的 .
    if (props.value.includes('.') && val == '.') return false
    //  限制 小数点 后两位
    if (props.value.includes('.') && props.value.split('.')[1].length >= 2) return false
    // 限制 最大长度
    if (props.value.length >= props.maxLength) return false
    // 最终返回 结果
    return emitsUpdate(props.value + val)
}
// 向父级传递数据
function emitsUpdate (val) {
    emits('change', val)
    emits('update:value', val)
}
// 输入事件
function inputChange () {
    emits('update:remark', pageData.reText)
}
function pay () {
    // 支付回调前校验 如果支付金额小于等于0 不触发回调函数 弹出轻提示 提示用户 输入支付金额
    if (props.value <= 0 || props.value == undefined) return uni.showToast({ title: '请输入支付金额', icon: 'none' })
    emits('payment', props.value)
}
// 控制键盘展开收起
function show (flag) {
    pageData.show = flag
}
defineExpose({ show })
</script>
<style lang="scss">
.flex-center-y {
    display: flex;
    align-items: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.re-input {
    max-height: 0;
    overflow: hidden;
    transition: .3s ease-out;

    input {
        flex-grow: 1;
        font-size: 26rpx;
    }

    .re-confirm {
        width: 90rpx;
        height: 55rpx;
        font-size: 26rpx;
        color: #fff;
        border-radius: 15rpx;
        background-color: var(--theme-color)
    }
}

.re-input-show {
    padding: 30rpx;
    max-height: 1000rpx;
    border-bottom: 1rpx solid #ededed;
    border-top: 1rpx solid #ededed;
}

.re-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    height: 110rpx;
    border-bottom: 1rpx solid #ededed;
    font-size: 26rpx;

    .r-left {
        color: rgb(87, 182, 238);
    }

    .r-right {
        color: #a6a6a6;

        image {
            margin-left: 10rpx;
            width: 25rpx;
            height: 25rpx;
            transition: .3s ease-out;
        }

        .isRotate {
            transform: rotate(-180deg);
        }
    }
}

.fixed-amoount {
    transition: .3s ease-out;
    overflow: hidden;

    .pay {
        margin: 30rpx 0;
        width: 690rpx;
        height: 110rpx;
        border-radius: 20rpx;
        background-color: var(--theme-color);
        color: #fff;
    }
}

.borard-mian {
    display: flex;
    background-color: #f7f7f7;
    max-height: 0;
    overflow: hidden;
    transition: .3s ease-out;

    .b-left {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;

        .number-item {
            margin: 0 10rpx 10rpx 0;
            width: 168rpx;
            height: 80rpx;
            background-color: #fff;
            border-radius: 15rpx;
        }

        .number-item:nth-last-child(2) {
            width: 350rpx;
        }
    }

    .b-right {
        flex-shrink: 0;
        width: 175rpx;

        .del-number,
        .pay-amount {
            width: 168rpx;
            height: 80rpx;
            border-radius: 15rpx;
            background-color: #fff;

            image {
                width: 45rpx;
                height: 40rpx;
            }
        }

        .pay-amount {
            margin-top: 10rpx;
            height: 260rpx;
            background-color: var(--theme-color);
            color: #fff;
        }
    }
}

.borard-mian-show {
    max-height: 1000rpx;
    padding: 15rpx 10rpx 50rpx 10rpx;
}

.hover-but-style {
    filter: brightness(90%);
}
</style>
